<template>
	<view>
		<view class="rx_detail" v-if="rp_info">
			<view class="top">
				<view class="acea-row row-between-wrapper">
					<view>{{ rp_info.create_date }}</view>
					<view>医生：{{ rp_info.doctor_name }}</view>
					<view class="font-color">{{ rp_info.rp_msg }}</view>
				</view>
				<view class="info">
					<view class="info_detail">{{ rp_info.diagnose || '暂无' }}</view>
					<view class="info_detail" v-if="rp_info.audit_reason">
						医生拒方<br>
						医生拒方原因：{{ rp_info.audit_reason }}</view>
					<view class="info_num">处方号：{{ rp_info.rp_id }}</view>
				</view>
			</view>
			<view class="medical_list">
				<view class="medical_top acea-row row-between-wrapper">
					<view>药品列表</view>
					<view class="num font-color">共{{ rp_info.sale_amount }}件</view>
				</view>
				<view class="item" v-for="(item, index) in rp_info.drugInfo" :key="index">
					<view class="name acea-row row-between-wrapper">
						<view>{{ item.drug_name }}</view>
						<view>数量：{{ item.sale_amount }}</view>
					</view>
					<view class="text">规格：<text>{{ item.drug_specification }}</text></view>
				</view>
				<view class="prescription acea-row row-between-wrapper">
					<view>处方笺</view>
					<button @click="checkPrescription" v-if="rp_info.rp_url">查看处方</button>
					<view v-else style="color: #969696;font-size: 24rpx;">暂无处方</view>
				</view>
			</view>
		</view>
		<!-- 处方图片 -->
		<view class="poster-pop" v-if="showPrescription">
			<image src="/static/images/poster-close.png" class="close" @click="showPrescription = false"></image>
			<image :src="rp_info.rp_url"></image>
			<!-- #ifndef H5  -->
			<view class="save-poster" @click="savePosterPath">保存到手机</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="keep">长按图片可以保存到手机</view>
			<!-- #endif -->
		</view>
		<view class="mask" v-if="showPrescription"></view>
	</view>
</template>

<script>
var _self;
import { getOrderDetail,groupOrderDetail } from '@/api/order';
export default {
	data() {
		return {
			order_id: '',
			rp_info: null,
			showPrescription: false,
		};
	},
	onLoad(options) {
		_self = this;
		if (options.order_id) {
			_self.order_id = options.order_id;
			_self.getInfo();
		} else {
			return _self.$util.Tips({ title: '缺少参数无法查看' }, { tab: 3, url: 1 });
		}
	},
	methods: {
		getInfo() {
			groupOrderDetail(_self.order_id)
				.then(res => {
					_self.rp_info = res.data.rp_info;
				})
				.catch(err => {
					return _self.$util.Tips({ title: err });
				});
		},
		// 查看处方
		checkPrescription() {
			// _self.showPrescription = true;
			let url = escape(this.rp_info.rp_url)
			uni.navigateTo({
				url:'/pages/users/rx_detail_webview/index?rp_url=' + url
			})
		},
		// 保存到手机
		savePosterPath() {
			uni.getSetting({
				success(res) {
					if(!res.authSetting['scope.writePhotosAlbum']) {
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								uni.getImageInfo({
									src: _self.rp_info.rp_url,
									success(imgInfo) {
										uni.saveImageToPhotosAlbum({
											filePath: imgInfo.path,
											success(result) {
												_self.showPrescription = false;
												_self.$util.Tips({
													title: '保存成功',
													icon: 'success'
												});
											},
											fail(err) {
												_self.$util.Tips({
													title: '保存失败'
												});
											}
										})
									},
									fail(err) {
										_self.$util.Tips({
											title: '保存失败'
										});
									}
								})
							}
						})
					} else {
						uni.getImageInfo({
							src: _self.rp_info.rp_url,
							success(imgInfo) {
								uni.saveImageToPhotosAlbum({
									filePath: imgInfo.path,
									success(result) {
										_self.showPrescription = false;
										_self.$util.Tips({
											title: '保存成功',
											icon: 'success'
										});
									},
									fail(err) {
										_self.$util.Tips({
											title: '保存失败'
										});
									}
								})
							},
							fail(err) {
								_self.$util.Tips({
									title: '保存失败'
								});
							}
						})
					}
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.top {
	background: #fff;
	font-size: 28rpx;
	line-height: 1;
	padding: 28rpx 28rpx 40rpx 28rpx;
	.row-between-wrapper {
		padding-bottom: 28rpx;
		border-bottom: solid 1px #f5f5f5;
	}
	.info {
		.info_detail {
			padding-top: 35rpx;
			line-height: 1.3;
		}
		.info_num {
			color: #969696;
			margin-top: 20rpx;
			font-size: 24rpx;
		}
	}
}
.medical_list {
	background: #fff;
	padding: 0 28rpx;
	margin-top: 10rpx;
	.medical_top {
		padding: 35rpx 0 30rpx 0;
		border-bottom: solid 1px #f5f5f5;
	}
	.item {
		line-height: 1;
		.name {
			view {
				&:first-child {
					font-weight: bold;
				}
			}
			margin-top: 35rpx;
		}
		.text {
			margin-top: 25rpx;
			padding-bottom: 20rpx;
			border-bottom: solid 1px #f5f5f5;
			text {
				color: #969696;
			}
		}
	}
	.prescription {
		padding: 12rpx 0 28rpx 0;
		button {
			padding: 15rpx 30rpx;
			border-radius: 30rpx;
			background: #e93323;
			font-size: 24rpx;
			color: #fff;
		}
	}
}
.poster-pop {
	width: 450rpx;
	height: 714rpx;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 399;
	top: 50%;
	margin-top: -357rpx;
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.close {
		width: 46rpx;
		height: 75rpx;
		position: fixed;
		right: 0;
		top: -73rpx;
		display: block;
	}
	.save-poster {
		background-color: #df2d0a;
		font-size: ：22rpx;
		color: #fff;
		text-align: center;
		height: 76rpx;
		line-height: 76rpx;
		width: 100%;
	}
	.keep {
		color: #fff;
		text-align: center;
		font-size: 25rpx;
		margin-top: 10rpx;
	}
}
</style>
